<template>
    <div class="login-container">   
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="login-form">
            <h1 class="login-title">仿链家租房系统</h1>
            <el-form-item label="用户姓名" prop="username">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" prop="password">
                <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {login,getUserInfo} from '@/api/login'
    export default {
    data() {
      return {
        form: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur' }
          ],
          
        }
      };
    },
    methods: {
      submitForm(formName){
          this.$refs[formName].validate(valid=>{
              if(valid){
                  login(this.form.username,this.form.password).then(response=>{
                      const resp = response.data
                      if(resp.flag){
                        this.$message({
                              message:resp.msg,
                              type:'success',
                          })
                        this.$router.push('/layout')
                      }else{
                          this.$message({
                              message:'登录失败！请检查用户名或密码是否正确',
                              type:'warning',
                          })
                      }
                  })
              }else{
                  /* 表单验证就没通过 */
                  this.$message({
                      message:'登录失败！请查看验证条件',
                      type:'warning',
                  })
              }
          })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
    div.login-container{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .login-form{
        margin: 200px auto;
        width: 400px;
        height: 250px;
        padding: 30px;
        border-radius: 60px;
        background-color: rgb(255, 255, 255,0.6);
        
    }
    .login-title{
        text-align: center;
        color: rgba(0, 0, 0, 0.562);
        
    }
    .el-button{
        margin-right: 40px;
    }
</style>